<template>
	<view class="page">
		<!-- basic info -->
		<view class="info">

			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
				<!-- name -->
				<u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.name"></u--input>
				</u-form-item>
				<!-- sex -->
				<u-form-item label="性别" prop="userInfo.sex" borderBottom>
					<u-radio-group v-model="model1.userInfo.sex">
						<u-radio :customStyle="{ marginRight: '8px' }" v-for="(item, index) in radiolist" :key="index"
							:label="item.name" :name="item.name">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<!-- phone -->
				<u-form-item label="手机" prop="userInfo.phone" borderBottom ref="item1">
					<u--input v-model="model1.userInfo.phone"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<!-- authority -->
		<view class="authority">
			<u--form labelPosition="left" :model="model2" :rules="rules2" ref="form2">
				<!-- name -->
				<u-form-item label="操作权限" prop="userInfo.authority" borderBottom @click="showCharacter = true">
					<u--input disabled disabledColor="#ffffff" v-model="model2.userInfo.authority"></u--input>
				</u-form-item>
				<!-- role -->
				<u-form-item label="角色权限" prop="userInfo.role" borderBottom @click="showRole = true">
					<u--input v-model="model2.userInfo.role"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<!--  -->
		<view class="submit">
			<u-button @click="submit" color="#3662EC" shape="circle">提交</u-button>
		</view>
		<!--  -->
		<u-action-sheet :show="showCharacter" :actions="characterActions" title="请选择权限" @close="showCharacter = false"
			@select="characterSelect">
		</u-action-sheet>

		<u-action-sheet :show="showRole" :actions="roleActions" title="请选择角色" @close="showRole = false"
			@select="roleSelect">
		</u-action-sheet>
	</view>
</template>
<script>
export default {
	data() {
		return {
			userInfo: {
				name: '',
				sex: '女',
				phone: 13300008888
			},
			radiolist: [{ name: '男' },
			{ name: '女' }],
			showCharacter: false,
			showRole: false,
			characterActions: [
				{
					name: '加注',
				},
				{
					name: '检查',
				},
				{
					name: '促销',
				},
			],
			roleActions: [
				{
					name: '站长',
				},
				{
					name: '管理员',
				},
				{
					name: '促销员',
				},
			],
			model2:
			{
				userInfo: {
					authority: '加注',
					role: '站长'
				}
			},
			form1: "",
			form2: "",
			rules: {
				'userInfo.name': {
					required: true,
					message: '请填写姓名',
					trigger: ['blur'],
				},
				'userInfo.phone': [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['blur']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					}
				]
			}
		}
	},
	methods: {
		characterSelect(e) {
			this.model2.userInfo.authority = e.name
		},
		roleSelect(e) {
			this.model2.userInfo.role = e.name
		},
		submit() {
			this.form1.validate().then(res => {
				uni.$u.toast('校验通过')
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.page {
	padding: 20rpx 40rpx;
}

.info,
.authority {
	background-color: white;
	border-radius: 10px;
	padding: 40rpx 80rpx;
}

.authority {
	margin: 30rpx 0 60rpx 0;

	::v-deep .u-form-item__body__left {
		width: 160rpx !important;
	}
}

.submit {
	width: 50%;
	margin: 160rpx auto 0 auto;
}
</style>
